<template>
	<view class="detail-container">
		<image :src="event.cover" class="bg-image" />

		<view class="content">
			<text class="title">{{ event.title }}</text>

			<view class="countdown">
				<text class="number">{{ time.days }}</text>
				<text class="unit">天</text>
				<text class="number">{{ time.hours }}</text>
				<text class="unit">时</text>
				<text class="number">{{ time.minutes }}</text>
				<text class="unit">分</text>
				<text class="number">{{ time.seconds }}</text>
				<text class="unit">秒</text>
			</view>

			<view class="music-control">
				<button @click="togglePlay">
					{{ isPlaying ? '暂停音乐' : '播放音乐' }}
				</button>
				<view class="stitle">
					点击播放按钮开始背景音乐
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCountdown
	} from '../../utils/time.js'

	export default {
		data() {
			return {
				event: null,
				time: {},
				audio: null,
				isPlaying: false,
				timer: null
			}
		},
		onLoad(options) {
			const eventId = parseInt(options.id)
			this.event = this.$store.state.events.find(e => e.id === eventId)
		},
		mounted() {
			this.initAudio()
			this.updateTime()
			this.timer = setInterval(this.updateTime, 1000)
		},
		beforeDestroy() {
			clearInterval(this.timer)
			if (this.audio) this.audio.destroy()
		},
		methods: {
			initAudio() {
				if (this.event.music) {
					// 区分平台创建音频实例
					if (uni.getSystemInfoSync().platform === 'devtools') {
						this.audio = uni.createInnerAudioContext();
					} else {
						this.audio = tt.createInnerAudioContext(); // 字节跳动小程序专用API
					}
					this.audio.src = this.event.music
					// 添加错误监听
					this.audio.onError((err) => {
						console.error('音频错误:', err);
						uni.showToast({
							title: '播放失败，请检查音频文件',
							icon: 'none'
						});
					});
					this.audio.onPlay(() => {
						console.log('播放开始');
						this.isPlaying = true;
					});
					this.audio.onPause(() => {
						console.log('播放暂停');
						this.isPlaying = false;
					});

					// 处理iOS自动播放限制
					// uni.showModal({
					// 	title: '提示',
					// 	content: '点击播放按钮开始背景音乐',
					// 	confirmText: '好的'
					// })
				}
			},
			togglePlay() {
				if (!this.audio) return;
				// 首次播放需用户触发，直接调用play()
				if (!this.audio.src) this.audio.src = this.event.music;
				this.isPlaying ? this.audio.pause() : this.audio.play();
			},
			updateTime() {
				this.time = getCountdown(this.event.date)
			}
		}
	}
</script>

<style>
	.detail-container {
		height: 100vh;
		position: relative;
	}

	.bg-image {
		position: absolute;
		width: 100%;
		height: 100%;
		filter: blur(20rpx);
		opacity: 0.7;
	}

	.content {
		position: relative;
		padding: 60rpx;
		text-align: center;
	}

	.title {
		font-size: 48rpx;
		color: #2c3e50;
		margin-bottom: 60rpx;
		display: block;
	}

	.countdown {
		display: flex;
		justify-content: center;
		align-items: baseline;
		margin: 40rpx 0;
	}

	.number {
		font-size: 64rpx;
		color: #e74c3c;
		margin: 0 10rpx;
	}

	.unit {
		font-size: 28rpx;
		color: #666;
		margin: 0 10rpx;
	}

	.music-control {
		margin-top: 80rpx;
	}

	.stitle {
		font-size: 14px;
		color: #333;
		font-weight: 600;
		line-height: 18px;
		text-align: center;
		margin-top: 10px;
	}
</style>